<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="风险预警名单">
				<view slot="center" class="navTitle">
					风险预警名单 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									未评估
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已评估
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="block">
						<view class="search">
							<view class="ico">
								<image src="@/static/images/icon-search.png" mode="aspectFit"></image>
							</view>
							<input type="text" v-model="keyword" placeholder="搜索姓名" confirm-type="search" @confirm="search" />
						</view>
						<view class="select">
							<uni-data-select
							  v-model="selectedGrade"
							  :localdata="gradeOptions"
							  :clear="false"
							  placeholder="所属班级"
							  @change="search"
							></uni-data-select>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="warningList">
						<view class="item" v-for="(i,index) in list" :key="index">
							<view class="l">
								<view class="name">
									{{i.name}}
								</view>
								<view class="gd">
									{{i.grade}}
								</view>
							</view>
							<view class="c" v-if="type==1">
								<view class="stage" :style="'color:'+stageOption(i.stage).color+';background:'+stageOption(i.stage).bgColor+';'">
									{{stageOption(i.stage).label}}
								</view>
							</view>
							<view class="r" v-if="type==0">
								<view class="btn" @tap="openForm(i.id)">
									<view class="ico">
										<image src="@/static/images/icon-pingu.svg" mode="aspectFit"></image>
									</view>
									<view class="p">
										评估
									</view>
								</view>
								<view class="tol" @tap="openSheetAction(0,i)">
									<image src="@/static/images/icon-dots.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="r" v-else>
								<view class="btn" @tap="viewDetail(i.id)">
									<view class="ico">
										<image src="@/static/images/icon-pingu.svg" mode="aspectFit"></image>
									</view>
									<view class="p">
										查看
									</view>
								</view>
								<view class="tol" @tap="openSheetAction(1,i)">
									<image src="@/static/images/icon-dots.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
		<u-action-sheet :closeOnClickOverlay="true" round="30rpx" :actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions:[
					[
						{
							name:'危机评估',
							action:'openForm'
						},
						{
							name:'测评报告',
							action:'openReport'
						},
						{
							name:'学生档案',
							action:'openProfile'
						},
						{
							name:'取消',
							action:'closeSheetAction'
						}
					],
					[
						{
							name:'查看评估内容',
							action:''
						},
						{
							name:'测评报告',
							action:'openReport'
						},
						{
							name:'学生档案',
							action:'openProfile'
						},
						{
							name:'取消',
							action:'closeSheetAction'
						}
					]
				],
				showActionSheet:false,
				actionSheetIndex:0,
				actionObj:{},//当前更多操作的对象
				oldScrollTop:0,
				scrollTop:0,
				gradeOptions:[],
				type:0,
				list:[],
				keyword:'',
				selectedGrade:'',
				pageSize:15,
				total:1,
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			handleAction(e){//操作菜单点击
				var that=this;
				const id=that.actionObj.id;
				switch (e.action){
					case 'openForm':{
						that.openForm(id);
						break;
					};
					case 'openReport':{
						that.openReport(id);
						break;
					};
					case 'openProfile':{
						that.openProfile(id);
						break;
					};
					case 'closeSheetAction':{
						that.closeSheetAction();
						break;
					};
				}
				that.closeSheetAction();
			},
			openForm(id){//打开评估页面
				console.log('打开评估页面')
			},
			openReport(id){//打开测评报告
				console.log('打开测评报告')
			},
			openProfile(id){//打开学生档案
				console.log('打开学生档案')
			},
			viewDetail(id){//查看评估结果
				console.log('查看评估结果')
			},
			openSheetAction(index,obj){//打开更多操作
				var that=this;
				that.actionSheetIndex=index;
				that.actionObj=obj;
				that.showActionSheet=true;
			},
			closeSheetAction(){//关闭更多操作
				var that=this;
				that.showActionSheet=false;
				that.actionSheetIndex=0;
				that.actionObj={};
			},
			getGradeOptions(){
				var that=this;
				var res=[
					{
						value:101,
						text:'七年级一班'
					},
					{
						value:102,
						text:'七年级一班'
					},
					{
						value:103,
						text:'七年级一班'
					}
				];
				that.gradeOptions=res;
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			search(){
				var that=this;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			toggleType(type){
				var that=this;
				that.type=type;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				let timer=setTimeout(function(){
					//请求开始
					var res={
						list:[
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:0
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:1
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:2
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:4
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:2
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:4
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:3
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:2
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:1
							},
							{
								id:101,
								name:'余夹雪',
								grade:'七年级一班',
								status:0,
								stage:1
							}
						],
						total:50
					};
					var arr=that.list.concat(res.list);
					that.list=arr;
					that.total=res.total;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},2000);
			},
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getGradeOptions();
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.filterBlock{
		.block{
			.search{
				background: #fff;
				border-color: #fff;
			}
		}
		.select{
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
	.warningList{
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 30rpx;
			.l{
				flex: 1 1 auto;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.name{
					font-size: 28rpx;
					flex: 0 0 auto;
					min-width: 4em;
					padding-right: 1em;
					color: #65554d;
				}
				.gd{
					flex: 0 0 auto;
					font-size: 24rpx;
					color: #b6aeab;
				}
			}
			.c{
				padding-right: 40rpx;
				flex: 0 0 auto;
				.stage{
					font-size: 24rpx;
					width: 80rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 6rpx;
				}
			}
			.r{
				display: flex;
				flex: 0 0 auto;
				align-items: center;
				.btn{
					display: flex;
					flex: 0 0 auto;
					width: 120rpx;
					height: 60rpx;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
					color: #fe9c29;
					font-size: 24rpx;
					background: #ffefde;
					.ico{
						flex: 0 0 auto;
						margin-right: 10rpx;
						image{
							display: block;
							width: 22rpx;
							height: 27rpx;
						}
					}
				}
				.tol{
					flex: 0 0 auto;
					margin-left: 20rpx;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					height: 60rpx;
					image{
						display: block;
						width: 26rpx;
						height: 6rpx;
					}
				}
			}
		}
	}
</style>
